import React, { useEffect, useState } from 'react';
import * as echarts from 'echarts';
import service from '../api';

interface Props {}

function EcharOne(props:Props) { 

    var [ xAxis,setXAxis] = useState([])
    var [ yData,setYData] = useState([])
    var myChart:any = null

    var request_data = async () =>{
        var res = await service.data.data_simpleData()
        console.log(res.data);
        var xAxis = res.data.data.map((item:any)=>item.x)
        var yData = res.data.data.map((item:any)=>item.val)
        setXAxis(xAxis)
        setYData(yData)
        // 绘图
        myChart.setOption({
            title: {
                text: '嗨购日注册用户量',
                left:'center',
                top:20
            },
            legend: {
                left:'center',
                bottom:10,
            },
            tooltip: {},
            xAxis: {
                data: xAxis
            },
            yAxis: {},
            series: [
                {
                name:'注册量',
                barWidth:35,  //柱子宽度
                type: 'bar',
                data: yData,
                itemStyle:{borderRadius:[20,20,0,0]},  //边框圆角
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#83bff6' },
                    { offset: 0.5, color: '#188df0' },
                    { offset: 1, color: '#188df0' }
                    ]
                )}
            ]
        });
    }

    // 实例化echarts 
    useEffect(()=>{

        // 请求数据
        request_data()
        // 基于准备好的dom,初始化echarts实例
        myChart =  echarts.init(document.getElementById('charts') || document.body);
    },[])

    return (
        <div className='echarts'>
            <div id='charts' style={{width:720,height:380}}></div>
        </div>
    );
}

export default EcharOne;